<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3791153" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon icon_coo">&#xe627;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe627;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe663;</span>
                <div class="name">加_icon</div>
                <div class="code-name">&amp;#xe663;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe600;</span>
                <div class="name">3.1选中</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d8;</span>
                <div class="name">3.1选中-copy</div>
                <div class="code-name">&amp;#x100d8;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe622;</span>
                <div class="name">垃圾桶</div>
                <div class="code-name">&amp;#xe622;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe610;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe60e;</span>
                <div class="name">小三角down</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe60f;</span>
                <div class="name">小三角up</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe639;</span>
                <div class="name">箭头_三角下</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe6c0;</span>
                <div class="name">消息</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe614;</span>
                <div class="name">店铺</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d7;</span>
                <div class="name">小三角up-copy</div>
                <div class="code-name">&amp;#x100d7;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d6;</span>
                <div class="name">小三角down-copy</div>
                <div class="code-name">&amp;#x100d6;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe61d;</span>
                <div class="name">前进</div>
                <div class="code-name">&amp;#xe61d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe73d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe78e;</span>
                <div class="name">向左回退</div>
                <div class="code-name">&amp;#xe78e;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe62a;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe75d;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe75d;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d5;</span>
                <div class="name">我的-copy-copy</div>
                <div class="code-name">&amp;#x100d5;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xec0a;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xec0a;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d4;</span>
                <div class="name">我的-copy</div>
                <div class="code-name">&amp;#x100d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe6da;</span>
                <div class="name">KHCFDC_首页</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe607;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#xe624;</span>
                <div class="name">星星</div>
                <div class="code-name">&amp;#xe624;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d1;</span>
                <div class="name">首页-copy</div>
                <div class="code-name">&amp;#x100d1;</div>
              </li>
          
            <li class="dib">
              <span class="icon icon_coo">&#x100d3;</span>
                <div class="name">星星-copy</div>
                <div class="code-name">&amp;#x100d3;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'icon_coo';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1669944132159') format('woff'),
       url('iconfont.ttf?t=1669944132159') format('truetype'),
       url('iconfont.svg?t=1669944132159#icon_coo') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.icon_coo {
  font-family: "icon_coo" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="icon_coo"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"icon_coo" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon icon_coo icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-jia_icon"></span>
            <div class="name">
              加_icon
            </div>
            <div class="code-name">.icon-jia_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xuanzhong"></span>
            <div class="name">
              3.1选中
            </div>
            <div class="code-name">.icon-xuanzhong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xuanzhong-copy"></span>
            <div class="name">
              3.1选中-copy
            </div>
            <div class="code-name">.icon-xuanzhong-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-lajitong"></span>
            <div class="name">
              垃圾桶
            </div>
            <div class="code-name">.icon-lajitong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-sousuo1"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xiaosanjiaodown"></span>
            <div class="name">
              小三角down
            </div>
            <div class="code-name">.icon-xiaosanjiaodown
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xiaosanjiaoup"></span>
            <div class="name">
              小三角up
            </div>
            <div class="code-name">.icon-xiaosanjiaoup
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-jiantousanjiaoxia"></span>
            <div class="name">
              箭头_三角下
            </div>
            <div class="code-name">.icon-jiantousanjiaoxia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xiaoxi"></span>
            <div class="name">
              消息
            </div>
            <div class="code-name">.icon-xiaoxi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-4"></span>
            <div class="name">
              店铺
            </div>
            <div class="code-name">.icon-4
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xiaosanjiaoup-copy"></span>
            <div class="name">
              小三角up-copy
            </div>
            <div class="code-name">.icon-xiaosanjiaoup-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xiaosanjiaodown-copy"></span>
            <div class="name">
              小三角down-copy
            </div>
            <div class="code-name">.icon-xiaosanjiaodown-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-qianjin"></span>
            <div class="name">
              前进
            </div>
            <div class="code-name">.icon-qianjin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-gouwuche1"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-a-ziyuan558"></span>
            <div class="name">
              向左回退
            </div>
            <div class="code-name">.icon-a-ziyuan558
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-biaoqianA01_wode-90-copy-copy"></span>
            <div class="name">
              我的-copy-copy
            </div>
            <div class="code-name">.icon-biaoqianA01_wode-90-copy-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-home"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-home
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-biaoqianA01_wode-90-copy"></span>
            <div class="name">
              我的-copy
            </div>
            <div class="code-name">.icon-biaoqianA01_wode-90-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-shouye3"></span>
            <div class="name">
              KHCFDC_首页
            </div>
            <div class="code-name">.icon-shouye3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xingxing"></span>
            <div class="name">
              星星
            </div>
            <div class="code-name">.icon-xingxing
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-shouye1-copy"></span>
            <div class="name">
              首页-copy
            </div>
            <div class="code-name">.icon-shouye1-copy
            </div>
          </li>
          
          <li class="dib">
            <span class="icon icon_coo icon-xingxing-copy"></span>
            <div class="name">
              星星-copy
            </div>
            <div class="code-name">.icon-xingxing-copy
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="icon_coo icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            icon_coo" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jia_icon"></use>
                </svg>
                <div class="name">加_icon</div>
                <div class="code-name">#icon-jia_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong"></use>
                </svg>
                <div class="name">3.1选中</div>
                <div class="code-name">#icon-xuanzhong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong-copy"></use>
                </svg>
                <div class="name">3.1选中-copy</div>
                <div class="code-name">#icon-xuanzhong-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lajitong"></use>
                </svg>
                <div class="name">垃圾桶</div>
                <div class="code-name">#icon-lajitong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo1"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaodown"></use>
                </svg>
                <div class="name">小三角down</div>
                <div class="code-name">#icon-xiaosanjiaodown</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaoup"></use>
                </svg>
                <div class="name">小三角up</div>
                <div class="code-name">#icon-xiaosanjiaoup</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jiantousanjiaoxia"></use>
                </svg>
                <div class="name">箭头_三角下</div>
                <div class="code-name">#icon-jiantousanjiaoxia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaoxi"></use>
                </svg>
                <div class="name">消息</div>
                <div class="code-name">#icon-xiaoxi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-4"></use>
                </svg>
                <div class="name">店铺</div>
                <div class="code-name">#icon-4</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaoup-copy"></use>
                </svg>
                <div class="name">小三角up-copy</div>
                <div class="code-name">#icon-xiaosanjiaoup-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiaosanjiaodown-copy"></use>
                </svg>
                <div class="name">小三角down-copy</div>
                <div class="code-name">#icon-xiaosanjiaodown-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
                <div class="name">前进</div>
                <div class="code-name">#icon-qianjin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche1"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-a-ziyuan558"></use>
                </svg>
                <div class="name">向左回退</div>
                <div class="code-name">#icon-a-ziyuan558</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_wode-90-copy-copy"></use>
                </svg>
                <div class="name">我的-copy-copy</div>
                <div class="code-name">#icon-biaoqianA01_wode-90-copy-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-home"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-home</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-biaoqianA01_wode-90-copy"></use>
                </svg>
                <div class="name">我的-copy</div>
                <div class="code-name">#icon-biaoqianA01_wode-90-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye3"></use>
                </svg>
                <div class="name">KHCFDC_首页</div>
                <div class="code-name">#icon-shouye3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing"></use>
                </svg>
                <div class="name">星星</div>
                <div class="code-name">#icon-xingxing</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye1-copy"></use>
                </svg>
                <div class="name">首页-copy</div>
                <div class="code-name">#icon-shouye1-copy</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing-copy"></use>
                </svg>
                <div class="name">星星-copy</div>
                <div class="code-name">#icon-xingxing-copy</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
